<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>元数据列管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
</head>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">工具栏表格</div>
                <div class="layui-card-body">

                    <!-- 表格工具栏 -->
                    <div class="layui-row vip-btn-tool-box">
                        <div class="layui-col-sm12 layui-col-sm4 layui-col-md4 layui-btn-container">
                            <button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-add" title="新增"><i class="vip-icon">&#xe65c;</i></button>
                            <button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-del" title="删除"><i class="vip-icon">&#xe664;</i></button>
                            <button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-refresh" title="刷新"><i class="vip-icon">&#xe68a;</i></button>
                            <button class="layui-btn layui-btn-radius layui-btn-primary" id="vip-btn-synchronous" title="同步"><i class="vip-icon">&#xe69c;</i></button>
                        </div>
                        <div class="layui-col-sm12 layui-col-sm8 layui-col-md8">
                            <form class="layui-form layui-form-pane">
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-label-sm">标题</label>
                                    <div class="layui-input-inline layui-input-sm">
                                        <input type="text" name="search" required="" lay-verify="required" lay-vertype="tips" placeholder="请输入内容" autocomplete="off" class="layui-input" data-form-pw="1515934826270.1904">
                                    </div>
                                    <label class="layui-form-label layui-label-sm">选择</label>
                                    <div class="layui-input-inline layui-input-sm">
                                        <select name="select">
                                            <option value=""></option>
                                            <option value="1" selected="">选择一</option>
                                            <option value="2">选择二</option>
                                            <option value="3">选择三</option>
                                            <option value="4">选择四</option>
                                        </select>
                                    </div>
                                    <button id="vip-btn-search" type="button" class="layui-btn layui-btn-radius layui-btn-primary" title="搜索"><i class="vip-icon">&#xe6b0;</i></button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div id="demo-table-2" lay-filter="table"></div>
                </div>
            </div>
        </div>
        <input type="hidden" id="layer_metadata-columnId"/>
    </div>
</div>

<script type="text/html" id="menu">
    <button class="layui-btn layui-btn-xs layui-bg-cyan" lay-event="view">查看</button>
    <button class="layui-btn layui-btn-xs layui-bg-gray" lay-event="edit">编辑</button>
    <button class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</button>
</script>
<script type="text/html" id="switchTpl">
    {{#  if(d.userflag === 1){ }}
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="启用|弃用" lay-filter="sexDemo" checked>
    {{#  } else{ }}
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="启用|弃用" lay-filter="sexDemo" >
    {{#} }}
</script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.config({base: '../js/'}).use(['layer','table','baajax','form','app'],function(){
    layui.$.support.cors = true; //允许ajax跨域
    var $ = layui.$, layer = layui.layer, table = layui.table, form = layui.form, app = layui.app;
    var ajax=layui.baajax;

    //加载层-默认风格
    layer.load();
    //此处演示关闭
    setTimeout(function(){
        layer.closeAll('loading');
    }, 1000);



    //基础信息设置
    // var base_url="/static/vipadmin/page/questionanswer";
    var base_url="/metadatacolumn";
    var base_name="元数据列";
    var base_table_id="metadata-column";
    var addupdateurl="Metadatacolumn";

    //监听性别操作
    form.on('switch(sexDemo)', function(obj){
        var check=obj.elem.checked;
        var $sss=$(obj.elem);
        ajax.put(base_url+"/status/"+this.value, {}, function (data) {
                if (data.code == '200') {
                    // alert(check);
                    if(check){
                        $sss.prop('checked','checked');
                    }else{
                        $sss.removeAttr('checked');
                    }
                    form.render('checkbox');
                    layer.msg('变更状态成功');
                }
            }, function (data) {
                layer.msg('变更状态失败');
            }
        );
    });
    // 表格
    // var table_metadata_column = table.render({
    //     elem: '#demo-table-2'
    //     ,id: base_table_id+'-table-id'
    //     ,url: base_url+'/page/1'   // 数据接口
    //     ,page: true                         // 开启分页
    //     ,loading: true                      // 开启loading
    //     ,cellMinWidth: 80                   // 每列最小宽度
    //     ,limits: [15,30,50]                 // 每页条数的选择项
    //     ,limit: 15                          // 默认每页条数
    //     ,toolbar: 'default'                 // 开启表格头部工具栏区域 该参数为 layui 2.4.0 开始新增。
    //     ,defaultToolbar: ['exports', 'filter', 'print'] // 自由配置头部工具栏右侧的图标 该参数为 layui 2.4.1 新增
    //     ,htmlTableCols: [[                           // 表头
    //         {type: 'checkbox', fixed: 'left'}
    //         ,{field: 'id', title: 'ID', sort: true}
    //         ,{field: 'title', title: '标题'}
    //         ,{field: 'titledescription', title: '标题描述'}
    //         ,{field: 'answer', title: '回答',totalRow: true}
    //         ,{field: 'createtime', title: '创建时间',templet: "<div>{{layui.util.toDateString(d.create)}}</div>"}
    //         ,{field: 'lastupdatetime', title: '最近修改时间',templet: "<div>{{layui.util.toDateString(d.create)}}</div>"}
    //         ,{field: 'createperson', title: '创建人'}
    //         ,{field: 'makerperson', title: '修改人'}
    //         ,{field: 'faqid', title: '问题ID'}
    //         ,{field: 'userflag', title: '状态',align:'center',templet: '#switchTpl', unresize: true}
    //         ,{title: '操作', fixed: 'right',width:160,align:'center', templet:'#menu'}
    //     ]]
    // });

    // layer.alert(parent.layui.$('#layer_metadata-tableId').val());
    var tableIdValue=parent.layui.$('#layer_metadata-tableId').val();
// layer.alert(tableIdValue);

    var url='';
    if(tableIdValue){
       url=base_url+'/by?tableId='+tableIdValue;
    }else{
       url=base_url+'/page/1';
    }

    // layer.alert("111111111111111");


    // 元数据列管理表格
    var table_metadata_column = table.render({
            elem: '#demo-table-2'
            ,id: base_table_id+'-table-id'
            ,url: url   // 数据接口
            ,page: true                         // 开启分页
            ,loading: true                      // 开启loading
            ,cellMinWidth: 80                   // 每列最小宽度
            ,limits: [15,30,50]                 // 每页条数的选择项
            ,limit: 15                          // 默认每页条数
            ,toolbar: 'default'                 // 开启表格头部工具栏区域 该参数为 layui 2.4.0 开始新增。
            ,defaultToolbar: ['exports', 'filter', 'print'] // 自由配置头部工具栏右侧的图标 该参数为 layui 2.4.1 新增
            ,cols: [[                           // 表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', sort: true}
                ,{field: 'field', title: '域'}
                ,{field: 'type', title: '类型'}
                ,{field: 'length', title: '长度'}
                ,{field: '_null', title: '默认空',totalRow: true}
                ,{field: 'collation', title: '编码',totalRow: true}
                ,{field: 'key', title: '主键',totalRow: true}
                ,{field: '_default', title: '默认值',totalRow: true}
                ,{field: 'extra', title: '自动递增',totalRow: true}
                ,{field: 'privileges', title: '执行权限',totalRow: true}
                ,{field: 'comment', title: '列注释',totalRow: true}
                ,{field: 'createtime', title: '创建时间',templet: "<div>{{layui.util.toDateString(d.createtime)}}</div>"}
                ,{field: 'lastupdatetime', title: '最近修改时间',templet: "<div>{{layui.util.toDateString(d.lastupdatetime)}}</div>"}
                ,{field: 'createperson', title: '创建人'}
                ,{field: 'makerperson', title: '修改人'}
                ,{field: 'faqid', title: '问题ID'}
                ,{field: 'userflag', title: '状态',align:'center',templet: '#switchTpl', unresize: true}
                ,{title: '操作', fixed: 'right',width:160,align:'center', templet:'#menu'}
            ]]
        });

    // 监听同步按钮
    $('#vip-btn-synchronous').on('click',function(){
        app.msg('点击了同步按钮');
        var synchronousUrl='/metadatatable';
        if(tableIdValue){
            synchronousUrl=synchronousUrl+'/synchronous/'+tableIdValue;
        }else{
            synchronousUrl=synchronousUrl+'/synchronous';
        }
        ajax.get(synchronousUrl, {}, function (data) {
            if (data.code !== 200) {
                //return alert_msg(data.msg, 0)
                layer.msg('同步失败');
            }else{
                //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.msg('同步成功');
            }
        },function(data){
            layer.msg('连接成功');
        });

    });


    // 监听新增按钮
    $('#vip-btn-add').on('click',function(){
        app.msg('点击了新增按钮');
        layui.$.get('/static/vipadmin/page/Add'+addupdateurl+'.html', {}, function (str) {
            var index = layer.open({
                type: 1
                , area: ['700px', '400px']
                , title: '添加元数据列信息'
                , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                , id: 'addMenuLayer' + 1 //防止重复弹出
                , content: str
                , end: function () {
                    table_metadata_column.reload();
                }//,shade: 0 //不显示遮罩
                //,skin: 'layui-layer-molv'
            });
        });
    });

    // 监听多选删除按钮
    $('#vip-btn-del').on('click',function(){
        var checkStatus = table.checkStatus(base_table_id+'-table-id'); //test即为基础参数id对应的值
        if(checkStatus.data.length==0){
            layer.msg('请选择要删除的数据');
            return;
        }else{
            var array=checkStatus.data;
            var arrList=copy(array);
            ajax.deleteDuplicate(base_url+"/", {
                ids: arrList
            }, function (data) {
                if (data.code !== 200) {
                    layer.msg('批量删除失败');
                }else{
                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.msg('批量删除成功');
                    table_metadata_column.reload();
                }
            });
        }
    });



    // 监听表格刷新
    $('#vip-btn-refresh').on('click',function(){
        // 重载方式 1
        table_metadata_column.reload();
        // 重载方式 2
        // table.reload('table-id-2', {})
    });





    // 监听搜索按钮
    $(document).on('click','#vip-btn-search',function(){
        var title = $('input[name=search]').val();
        var select = $('select[name=select]').val();
        if(!title){
            app.msg('搜索不能为空');
            return false;
        }

        layer.alert('标题：'+title+';选择：'+select);
    });

    //监听工具条
    table.on('tool(table)', function(obj){
        var data = obj.data;            //获得当前行数据
        var layEvent = obj.event;       //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr;                //获得当前行 tr 的DOM对象

        if(layEvent === 'view'){ // 查看
            app.msg('您点击了查看');
            $('#layer_metadata-columnId').val(obj.data.id);
            layui.$.get('/static/vipadmin/page/Edit'+addupdateurl+'.html', {}, function (str) {
                var index = layer.open({
                    type: 1
                    , area: ['700px', '400px']
                    , title: '查看元数据列信息'
                    , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , id: 'addMenuLayer' + 1 //防止重复弹出
                    , content: str
                    , end: function () {
                        table_metadata_column.reload();
                    }//,shade: 0 //不显示遮罩
                    //,skin: 'layui-layer-molv'
                });
            });
        }else if(layEvent === 'edit'){ // 编辑
            app.msg('您点击了编辑');
            $('#layer_metadata-columnId').val(obj.data.id);
            layui.$.get('/static/vipadmin/page/Edit'+addupdateurl+'.html', {}, function (str) {
                var index = layer.open({
                    type: 1
                    , area: ['700px', '400px']
                    , title: '编辑'+base_name+'信息'
                    , offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    , id: 'addMenuLayer' + 1 //防止重复弹出
                    , content: str
                    , end: function () {
                        table_metadata_column.reload();
                    }//,shade: 0 //不显示遮罩
                    //,skin: 'layui-layer-molv'
                });
            });
        } else if(layEvent === 'del'){ //删除
            layer.confirm('确定删除该'+base_name+'吗', function(index){
                layer.close(index);
                 //向服务端发送删除指令
                ajax.delete(base_url+"/"+obj.data.id, {}, function (data) {
                    if (data.code !== 200) {
                        //return alert_msg(data.msg, 0)
                        layer.msg('删除失败');
                    }else{
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.msg('删除成功');
                    }
                });
            });
        }
    });
    function copy(obj) {
        var arrList = new Array();
        for (var attr in obj) {
            arrList.push(obj[attr].id);
        }
        return arrList;
    }
});
</script>
</body>
</html>